import { type Config } from "tailwindcss";
import TailwindForm from "@tailwindcss/forms";
export default {
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  plugins: [
    TailwindForm(),
  ],
  darkMode: "class",
  theme: {
    screens: {
      "xs": { "max": "640px" },
      "sm": { "min": "641px", "max": "767px" },
      // => @media (min-width: 640px and max-width: 767px) { ... }

      "md": { "min": "768px" },
      // "md": { "min": "768px", "max": "1023px" },
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      "lg": { "min": "1024px" },
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      "xl": { "min": "1280px" /*  "max": "1535px" */ },
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      // "2xl": { "min": "1536px" },
      // => @media (min-width: 1536px) { ... }
    },
  },
} satisfies Config;
